<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加折扣信息
      </el-button>
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" prop="id" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rate"
        label="折扣"
        align="center"
      />
      <el-table-column
        prop="created"
        label="创建时间"
        align="center"
      />
      <!-- <el-table-column
        label="创建时间"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.created | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
      />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="添加折扣"
      :visible.sync="dialogFormVisible"
      top="15vh"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="200px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item
          label="折扣"
          prop="rate"
        >
          <el-input v-model="temp.rate"/>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input v-model="temp.remark"/>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="createData()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  import {rateManage, rateAdd} from '@/api/v1'

  import waves from '@/directive/waves' // Waves directive
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {parseTime} from '@/utils'

  export default {
    directives: {waves},
    components: {Pagination},
    data() {
      return {
        dialogFormVisible: false,

        tableData: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,

        listQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id',
          id: ''
        },
        data: {
          rate: '',
          remark: ''
        },
        key: 1, // table key
        temp: {
          rate: '',
          remark: '',
          ownerId: '',
          type: 2
        },

        rules: {
          rate: [{required: true, message: '请输入折扣', trigger: 'blur'},
            {pattern: /^[0]+([.]{1}[0-9]{1,3})?$/, message: '折扣范围为0.001-0.999，如0.98表示98折'}],
          remark: [{required: false, message: '请输入备注', trigger: 'blur'}]
        }
      }
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        )
        this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      const id = this.$route.query.relationId
      this.listQuery.id = id
      this.temp.ownerId = id
      console.log(id)
      this.getList()
    },
    methods: {
      // getCooperationTrade: function(id) {
      //   getCooperationTrade({ id: id })
      //     .then(response => {
      //       this.tableData = response.data.items;
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     });
      // },
      createData() {
        this.$refs['temp'].validate(valid => {
          if (valid) {
            // this.temp.created = new Date()
            // this.temp.author = "vue-element-admin";
            rateAdd(this.temp).then(res => {
              // this.tableData.unshift(this.temp);
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
          }
        })
      },
      handleCreate() {
        this.temp.rate = '',
          this.temp.remark = '',
          // this.temp.id="",

          this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['temp'].clearValidate()
        })
      },

      getList() {
        this.listLoading = true
        this.listQuery.ownerId = this.listQuery.id
        rateManage(this.listQuery).then(res => {
          this.tableData = res.data.records
          this.total = Number(res.data.total)

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>

